<template>
	<div class="swiper-main">
		<swiper :options="swiperOption">
			<!-- slides -->
			<swiper-slide v-for="(item,index) in swiperList.data" :key="index">
				<img :src="item.imgUrl" alt="">
			</swiper-slide>

			<div class="swiper-pagination" slot="pagination"></div>

		</swiper>
	</div>
</template>

<script>
	import 'swiper/dist/css/swiper.css'
	import {
		swiper,
		swiperSlide
	} from 'vue-awesome-swiper'
	export default {
		name: 'homeSwiper',
		data() {
			return {
				swiperOption: {
					autoplay: 3000,
					speed: 1000,
					pagination: {
						el: '.swiper-pagination', //与slot="pagination"处 class 一致
						clickable: true, //轮播按钮支持点击
					}
				},
				
			}
		},
		props:['swiperList'],
		components: {
			swiper,
			swiperSlide
		},

	}
</script>

<style scoped>
	.swiper-main {
		width: 100%;
		height: 165px;
	}

	.swiper-main img {
		width: 100%;
		height: 165px;
	}

	.swiper-container-horizontal>.swiper-pagination-bullets {
		bottom: 5px;
	}

	::v-deep .swiper-pagination-bullet-active {
		opacity: 1;
		background: #b0352f !important;
	}
</style>
